// 获取页面元素
const form = document.querySelector("form");
const areaInput = document.getElementById("area");
const priceInput = document.getElementById("price");
const ratioInput = document.getElementById("ratio");
const yearsInput = document.getElementById("years");
const resultDiv = document.getElementById("result");;

// 监听表单提交事件
form.addEventListener("submit", function (event) {
  // 阻止表单默认提交行为
  event.preventDefault();

  // 获取用户输入值
  // 思考：获取到的值需要先做数据转换吗？
  area = areaInput.value
  price = priceInput.value
  ratio = ratioInput.value
  years = yearsInput.value

  // console.log(area);
  // console.log(price);
  // console.log(ratio);
  // console.log(years);

  area = +area
  price = +price
  ratio = +ratio
  years = +years
  

  // 计算房屋总价、首付款、贷款金额、月供
  // 房屋总价公式 ： 房屋面积 * 房屋单价
  let houses = area * price

  // 首付款公式： 总价 * （1 - 按揭成数 / 10）
  let downpayment = houses * (1-ratio / 10)

  // 贷款金额： 总价 * （按揭成数 / 10）
  let loan = houses * (ratio / 10)

  // 贷款月数：贷款年限 * 12
  let months = years * 12

  // 月供：贷款金额 / 总月数
  let monthly = loan / months

  // 显示结果
  // 填入对应的结构
  resultDiv.innerHTML = `<div id="result">
  <p>房屋总价：${houses}元</p>
  <p>首付款：${downpayment}元</p>
  <p>贷款金额：${loan}元</p>
  <p>贷款年限：${years}年</p>
  <p>贷款月数：${months}个月</p>
  <p>月供：${monthly}元/月</p>
</div>`;
});
